<template>
  <div>
    <el-card class="box-card">
      <!-- 头部 -->
      <div class="content_top">
        <div style="width: 100%;height: 50px;line-height: 50px;border-bottom: 1px solid #E9E9E9;">
          <h3 style="margin-left: 30px;font-size: 20px;font-weight: 700;">楼座管理</h3>
        </div>
        <div style="width: 100%;height: 100px;">
          <div style="width: 100%;height: 50px;line-height: 50px;font-size: 14px;margin-top: 10px;">
            <span style="margin-right: 10px;margin-left: 30px;">房屋用途</span>
            <el-select v-model="purpose" style="width: 200px;" placeholder="请选择住户类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span style="margin-right: 10px;margin-left: 30px;">楼座名称/编号</span>
            <el-input v-model="building" style="width: 250px;margin-left: 20px;" placeholder="请输入"></el-input>
            <el-button style="margin-left: 100px;height: 30px;" type="primary" @click="queryBuildingInfo">查询</el-button>
            <el-button style="margin-left: 20px;height: 30px;" @click="cleanBuilding">重置</el-button>
          </div>
        </div>
      </div>
      <!-- 楼座列表 -->
      <div class="content">
        <div style="width: 100%;height: 50px;overflow: hidden;margin-top: 10px;">
          <p style="margin: 15px 0 0 40px;float: left;">楼座列表</p>
          <el-button style="float: right;height: 35px;margin-top: 8px;margin-right: 2%;" @click="batchDel">批量操作</el-button>
          <el-button type="primary" @click="dumpAdd" style="float: right;height: 35px;margin-top: 8px;margin-right: 20px;" icon="el-icon-plus">新增</el-button>
        </div>
        <div style="width: 100%;height: 100%;margin-top: 10px;">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 95%;margin: 0 auto;text-align: center;"
            @selection-change="handleSelectionChange">
            <el-table-column
              fixed
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="building"
              label="楼座名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="purpose"
              label="房屋用途"
              width="210">
            </el-table-column>
            <el-table-column
              prop="completionTime"
              label="建成日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="numberOfUnits"
              label="单元数量"
              width="130">
            </el-table-column>
            <el-table-column
              prop="numberOfUnitFloors"
              label="楼层数量"
              width="130">
            </el-table-column>
            <el-table-column
              prop="back"
              label="备注"
              width="210">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="dumpUpdate(scope.row)" type="text" size="small">编辑</el-button>
                <el-button type="text" size="small" @click="delBuildingInfo(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin-left: 25%;margin-top: 10px;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'SmartPropertyVueWorkbench',

  data() {
    return {
      purpose: '',
      building: '',
      options: [{
        value: '普通住宅',
        label: '普通住宅'
      }, {
        value: '商业用地',
        label: '商业用地'
      }, {
        value: '商住两用',
        label: '商住两用'
      }, {
        value: '其他',
        label: '其他'
      }],
      tableData: [],
      total: 0,
      currentPage4: 1,
      pageRequest: { // 分页请求参数
        pageNum: 1, // 当前页
        pageSize: 10 // 每页多少条数据
      },
      multipleSelection: []
    }
  },

  mounted() {
    this.queryBuildingInfo()
  },

  methods: {
    queryBuildingInfo(){ // 楼栋信息列表展示
      this.$axios.get('/memberCjq/building/queryBuildingInfo', {
        params: {
          building: this.building,
          purpose: this.purpose,
          pageNum: this.pageRequest.pageNum,
          pageSize: this.pageRequest.pageSize,
          cid: window.sessionStorage.getItem('vid')
        }
      }).then(res => {
        if (res.status === 200){
          this.tableData = res.data.obj.content
          this.total = res.data.obj.total
        }
      })
    },
    delBuildingInfo (obj) { // 删除楼栋信息
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('/memberCjq/building/delBuildingInfo', {
          params: {
            id: obj.id
          }
        }).then(res => {
          if (res.data.flag) {
            this.insertLog('删除楼栋信息')
            this.MyMessage('删除成功!', 'success')
            this.queryBuildingInfo()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    batchDel () { // 批量删除楼栋信息
      const ids = []
      this.multipleSelection.forEach(item => {
        ids.push(item.id)
      })
      this.$axios.put('/memberCjq/building/batchDel/'+ids).then(res => {
        if (res.data.flag) {
          this.MyMessage('批量删除成功!', 'success')
          this.queryBuildingInfo()
        }
      })
    },
    cleanBuilding(){
      this.purpose = ''
      this.building = ''
      this.queryBuildingInfo()
    },
    dumpAdd(){
      this.$router.push('/buildingAdd')
    },
    dumpUpdate(obj){ // 跳转修改楼栋页面
      this.$router.push({path:'/buildingUpdate', query: {buildingForm: obj}})
    },
    handleSelectionChange (val) { // 获取选中id
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.pageRequest.pageSize = val
      console.log(`每页 ${val} 条`)
      this.queryBuildingInfo()
    },
    handleCurrentChange(val) {
      this.pageRequest.pageNum = val
      console.log(`当前页: ${val}`)
      this.queryBuildingInfo()
    },
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    }
  }
}
</script>

<style scoped>
.box-card{
  height: 100%;
  margin: 10px;
  font-family: '微软雅黑';
}
.content_top{
  width: 100%;
  height: 120px;
  overflow: hidden;
  border: 1px solid #E9E9E9;
}
::v-deep(.el-input__inner){
  height: 30px;
}
::v-deep(.el-date-editor .el-range-separator){
  line-height: 22px;
}
::v-deep(.el-button){
  line-height: 0;
}
.content{
  width: 100%;
  height: 100%;
  border: 1px solid #E9E9E9;
  margin-top: 20px;
}
</style>